import React from 'react';
import {Form ,Row ,Col, Select ,Button} from 'antd';
import Grid from '../../components/table/grid';
import {injectIntl} from 'react-intl';
import {getYear} from '../../utils/Array';
import moment from 'moment';
import axios from "axios/index";
import {sessionManager} from "../../utils/sessionStorage";
import qs from 'qs';

const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;

class MonthlyBill extends React.Component {
    constructor(props) {
        super(props);
        this.common = this.props.intl.messages.common;
        this.state={
            params:{
                year:moment().format('YYYY')
            },
            refresh:0
        };
        this.columns = [
            {
                title: '账单时间',
                dataIndex: 'settlementDay',
                key: 'settlementDay',
            },
            {
                title: '结算电量（度）',
                dataIndex: 'electric',
                key: 'electric',
            },
            {
                title: '结算电费（元）',
                dataIndex: 'electricAmount',
                key: 'electricAmount',
            },
            {
                title: '结算服务费（元）',
                dataIndex: 'serviceAmount',
                key: 'serviceAmount',
            },
            {
                title: '结算总费用（元）',
                dataIndex: 'totalAmount',
                key: 'totalAmount',
            },
            {
                title: this.common.operation,
                key: 'action',
                render: (text, record) => (
                    <a onClick={() => this.goLink(text, record)}>账单详情</a>
                )
            }
        ]
    }

    componentDidMount() {

    }

    goLink=(text,record)=>{
        sessionManager.set('monthBill', text);
        this.props.history.push('/finance/BillDetails4Month');
    };


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!!err) {
                return;
            }
            console.log(values);
            this.setState(Object.assign(this.state.params,values));
            this.setState({
                refresh:this.state.refresh+1
            })
        });
    };


    render() {
        const token=(JSON.parse(sessionStorage.getItem("token"))||{}).token;
        let locale=sessionManager.get('locale');
        let exportQs=`${qs.stringify(this.state.params)}&token=${token}&locale=${locale}`;
        console.log('exportQs',exportQs);
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <form form={this.props.form} className="SC-form">
                    <Row gutter={24} type="flex">
                        <Col span={3}>
                            <FormItem
                            >
                                {getFieldDecorator('year',{
                                    initialValue:this.state.params.year
                                })(
                                    <Select placeholder={'年份'}>
                                        {getYear().map((k, i) => {
                                            return <Option value={k} key={i}>{k}</Option>
                                        })}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem>
                                <Button type="primary" htmlType="submit"
                                        onClick={this.handleSubmit} className="ant-btn-84">{this.common.search}</Button>
                                <a href={`${axios.defaults.baseURL}/api/settlement/settled/monthlyBill/export?${exportQs}`}>
                                    <Button type="primary">{this.common.exportStatement}</Button>
                                </a>
                            </FormItem>
                        </Col>
                    </Row>
                </form>
                <Grid columns={this.columns} params={this.state.params}
                      url={'/api/settlement/settled/monthlyBill'} refresh={this.state.refresh}/>
            </div>
        )
    }
}

MonthlyBill = createForm()(MonthlyBill);
export default injectIntl(MonthlyBill)
